<script>
import {inject, ref} from 'vue'
import {confirm} from '../../utils/message'
import CodeJs from './CodeJs'


export default {
  name: 'ItemPropertiesPanel',
  components: { CodeJs},
  setup() {
    let formDatas = inject("activeItemData");
    const fieldList = ref({});
    const formProps = ref({});
    const advancedFieldList = ref({});
    const actions = ref({});
    const currentField = ref({});
    return {
      formDatas, fieldList, formProps, advancedFieldList, actions, currentField
    }
  },
  data() {
    return {
      jsEditor: false,
      activeNames: ['1'],
      formRules: {},
      jsValue: "console.log('hello world')",
      fieldName: ''
    }
  },
  methods: {
    jsButtonClick(name) {
      this.jsEditor = !this.jsEditor
      this.fieldName = name
    },
    changeValue(name, data) {
      this.formProps[name] = data
    },
    handelDelete(rows) {
      let _this = this
      let items = _this.formProps.elements;
      confirm('删除行，已设置组件可能丢失，确认删除吗？', function () {
        for (let item in items) {
          let temp = items[item];
          if (temp.rowIndex == rows.rowIndex) {
            items.splice(item, 1)
          }
        }
      })
    },
    handelDeleteCol(row, srow) {
      confirm('删除列，已设置组件可能丢失，确认删除吗？', function () {
        for (let item in row.columns) {
          let temp = row.columns[item];
          if (temp.colIndex == srow.colIndex) {
            row.columns.splice(item, 1)
          }
        }

      })
    },
    handelAddRow() {
      this.formProps.elements.push({
        rowIndex: this.formProps.elements.length + 1,
        columns: [{colIndex: 1, colspan: 24, items: []}]
      })
    },
    handelAddItem(row) {
      this.formProps.values.push({});
    },
    handelDeleteItem(row) {
      let _this = this;
      let data = _this.formProps.values;
      for (let item in data) {
        let temp = data[item];
        if (temp.label == row.label) {
          data.splice(item, 1)
        }
      }
    },
    handelAddCol(row) {
      row.columns.push({
        colIndex: row.columns.length + 1,
        colspan: 24,
        items: []
      })
    },
    colChange(rows) {
      let len = rows.elements.length
      if (rows.cols > len) {
        for (let i = len; i < rows.cols; i++) {
          rows.elements.push({colIndex: i + 1, datas: []})
        }
      } else {
        //如果是小于原来的长度，则 将原有的数组由大到小删除
        for (let i = len - 1; i >= rows.cols; i--) {
          rows.elements.splice(i, 1)
        }
      }
      console.log(rows)
    },
    rowClassName({row, rowIndex}) {
      row.xh = rowIndex + 1
    },
    mergeDraft() {

    },
    resetForm() {

    }
  },
  watch: {
    formDatas: {
      deep: true,
      handler: function () {
        let _this = this
        let dataList = _this.formDatas.dataList
        if (dataList.length == 0) {
          _this.fieldList = {}
          _this.formProps = {}
          _this.advancedFieldList = {}
          _this.actions = {}
          return
        }
        let activeId = _this.formDatas.activeId
        let parentCompType = _this.formDatas.parentCompType
        if (dataList) {
          for (let i = 0; i < dataList.length; i++) {
            let temp = dataList[i]
            if (parentCompType == 'container') {
              let outFlag = false
              let elements = temp.preps.elements
              for (let j in elements) {
                let columns = elements[j].columns
                let flag = false
                for (let k in columns) {
                  let items = columns[k].items
                  let flag2 = false
                  for (let l in items) {
                    let temp2 = items[l]
                    if (temp2.id === activeId) {
                      _this.currentField = temp2;
                      _this.fieldList = temp2.fields
                      _this.formProps = temp2.preps
                      _this.advancedFieldList = temp2.advancedPreps
                      _this.actions = temp2.actions
                      outFlag = flag = flag2 = true
                      break
                    }
                  }
                  if (flag2) {
                    break
                  }
                }
                if (flag) {
                  break
                }
              }
              if (outFlag) {
                break
              }
            } else {
              if (activeId === temp.id) {
                _this.currentField = temp;
                _this.fieldList = temp.fields
                _this.formProps = temp.preps
                _this.advancedFieldList = temp.advancedPreps
                _this.actions = temp.actions
                break
              }
            }
          }
        }
      }
    }
  }
}
</script>

<style lang = "scss" scoped>
:deep(.el-scrollbar) {
  height: 90% !important;
}

:deep(.el-dialog__body) {
  padding: 0;
}

.oper-btn {
  cursor: pointer;
}

.dynamic-form {
  width: 270px;
  height: 100%;
}
</style>
<template>
  <star-horse-dialog :visible = "jsEditor" :title = "'自定义事件'" is-batch = "false" @merge = "merge"
                     @mergeDraft = "mergeDraft"
                     @reset = "resetForm">
    <code-js
        :field-name = "fieldName"
        :value = "jsValue"
        style = "height: 100%"
        @changeValue = "changeValue"
    />
  </star-horse-dialog>
  <el-scrollbar>
    <el-form
        :model = "formProps"
        :rules = "formRules"
        class = "dynamic-form"
        ref = "itemPropertiesRef"
        size = "small"
        label-position = "top"
    >
      <el-collapse
          class = "widget-collapse"
          v-model = "activeNames"
      >
        <el-collapse-item name = "1">
          <template #title>
            &nbsp;<user-icon icon = "fa-grip-lines-vertical"/>&nbsp;&nbsp;<span>基础属性</span>
          </template>
          <template v-if = "formDatas.compType==='container'">
            <el-form-item
                label = ""
                prop = "rows"
            >
              <el-table
                  :data = "formProps.elements"
                  :fit = "true"
                  :row-class-name = "rowClassName"
                  border
                  max-height = "470px"
                  ref = "containerRef"
              >
                <el-table-column
                    :show-overflow-tooltip = "true"
                    :width = "50"
                    label = "行号"
                    align = "center"
                    prop = "rowIndex"
                    v-if = "true ">
                  <template #default = "scope">
                    <el-form-item
                        :prop = "'formProps.'+scope.$index+'.rowIndex'"
                        v-if = "!false">
                      {{ scope.row.xh }}
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                    :show-overflow-tooltip = "true"
                    label = "列"
                    width = "200px"
                    prop = "colIndex"
                    v-if = "true "
                >
                  <template #default = "scope">
                    <el-table
                        :data = "scope.row.columns"
                        :fit = "true"
                        :row-class-name = "rowClassName"
                        border
                        ref = "stb"
                    >
                      <!--  <el-table-column label="编号" width="40">
                        <template #default="sscope">
                        <el-form-item
                          :prop="'scope.row.columns.'+sscope.$index+'.colIndex'"
                        >
                          {{ sscope.row.xh }}
                          </el-form-item>
                          </template>
                       </el-table-column> -->
                      <el-table-column label = "colspan">
                        <template #default = "sscope">
                          <el-form-item
                              :prop = "'scope.row.columns.'+sscope.$index+'.colspan'"

                          >
                            <el-input-number
                                :min = "1"
                                :max = "24"
                                :step = "4"
                                controls-position = "right"
                                size = "small"
                                v-model = "sscope.row.colspan"

                            />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column
                          align = "center"
                          prop = "oper"
                          width = "60px"
                      >
                        <template #header>
										<span
                        @click = "handelAddCol(scope.row)"
                        class = "oper-btn"
                        title = "添加列"
                    >
											<user-icon icon = "fa fa-plus-square"/>
										</span>
                        </template>
                        <template #default = "sscope">
										<span
                        @click = "handelAddCol(scope.row)"
                        class = "oper-btn"
                        title = "添加列"
                    >
											<user-icon icon = "fa fa-plus-square"/>
										</span>&nbsp;&nbsp;
                          <span
                              @click = "handelDeleteCol(scope.row,sscope.row)"
                              class = "oper-btn"
                              title = "删除列"
                              v-if = "scope.row.columns.length>1"
                          >
											<user-icon
                          icon = "fa fa-minus-square"
                          style = "color:indianred"
                      />
										</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column
                    align = "center"
                    prop = "oper"
                    width = "60px"
                >
                  <template #header>
										<span
                        @click = "handelAddRow"
                        class = "oper-btn"
                        title = "添加行"
                    >
											<user-icon icon = "fa fa-plus-square"/>
										</span>
                  </template>
                  <template #default = "scope">
										<span
                        @click = "handelAddRow"
                        class = "oper-btn"
                        title = "添加行"
                    >
											<user-icon icon = "fa fa-plus-square"/>
										</span>&nbsp;&nbsp;
                    <span
                        @click = "handelDelete(scope.row)"
                        class = "oper-btn"
                        title = "删除行"
                        v-if = "formProps.elements.length>1"
                    >
											<user-icon
                          icon = "fa fa-minus-square"
                          style = "color:indianred"
                      />
										</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <template v-for = "(item,key) in fieldList">
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='input'"
              >
                <el-input
                    :placeholder = "'请输入'+item.label"
                    v-model = "formProps[key]"
                />
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='radio'"
              >
                <el-radio-group v-model = "formProps[key]">
                  <el-radio
                      :label = "data"
                      :value = "data"
                      v-for = "data in item.values"
                  />
                </el-radio-group>
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='checkbox'"
              >
                <el-checkbox-group v-model = "formProps[key]">
                  <el-checkbox
                      :label = "data"
                      :value = "data"
                      v-for = "data in item.values"
                  />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='number'"
              >
                <el-input-number
                    :placeholder = "'请输入'+item.label"
                    v-model = "formProps[key]"
                />
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='switch'"
              >
                <el-switch
                    :active-value = "item.values[0]"
                    :inactive-value = "item.values[1]"
                    active-text = "是"
                    inactive-text = "否"
                    v-model = "formProps[key]"
                />
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='button'"
              >
                <el-button>Click</el-button>
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='select'"
              >
                <el-select v-model = "formProps[key]">
                  <el-option
                      :label = "data"
                      :value = "data"
                      v-for = "data in item.values"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                  :label = "item.label"
                  :prop = "key"
                  v-if = "item.type==='textarea'"
              >
                <el-input
                    :placeholder = "'请输入'+item.label"
                    type = "textarea"
                    v-model = "formProps[key]"
                />
              </el-form-item>
            </template>
          </template>
          <template v-else v-for = "(item,key) in fieldList">
            <el-form-item :label = "item.label" :prop = "key" :required = "item.required">
              <el-input
                  v-if = "item.type==='input'"
                  :placeholder = "'请输入'+item.label"
                  v-model = "formProps[key]"/>
              <el-radio-group v-model = "formProps[key]" v-if = "item.type==='radio'">
                <el-radio :label = "data" :value = "data" v-for = "data in item.values"/>
              </el-radio-group>
              <el-checkbox-group v-model = "formProps[key]" v-if = "item.type==='checkbox'">
                <el-checkbox :label = "data" :value = "data" v-for = "data in item.values"/>
              </el-checkbox-group>
              <el-input-number v-if = "item.type==='number'" :placeholder = "'请输入'+item.label" v-model =
                  "formProps[key]"/>
              <el-switch v-if = "item.type==='switch'"
                         :active-value = "item.values[0]"
                         :inactive-value = "item.values[1]"
                         active-text = "是"
                         inactive-text = "否"
                         v-model = "formProps[key]"
              />
              <el-button v-if = "item.type==='button'">Click</el-button>
              <el-select v-model = "formProps[key]" v-if = "item.type==='select'">
                <el-option :label = "data" :value = "data" v-for = "data in item.values"/>
              </el-select>
              <el-input v-if = "item.type==='textarea'"
                        :placeholder = "'请输入'+item.label"
                        type = "textarea" v-model = "formProps[key]"/>
            </el-form-item>
          </template>
          <el-table v-if = "currentField.type==='checkbox'||currentField.type==='radio'"
                    :data = "formProps.values"
                    :fit = "true"
                    :row-class-name = "rowClassName">
            <el-table-column label = "标签名称" prop = "label">
              <template #default = "scope">
                <el-input v-model = "scope.row.label"/>
              </template>
            </el-table-column>
            <el-table-column label = "选中值" prop = "trueLabel">
              <template #default = "scope">
                <el-input v-model = "scope.row.trueLabel"/>
              </template>
            </el-table-column>
            <el-table-column label = "未选中值" prop = "falseLabel">
              <template #default = "scope">
                <el-input v-model = "scope.row.falseLabel"/>
              </template>
            </el-table-column>
            <el-table-column
                align = "center"
                prop = "oper"
                width = "60px">
              <template #header>
										<span
                        @click = "handelAddItem"
                        class = "oper-btn"
                        title = "添加行"
                    >
											<user-icon icon = "fa fa-plus-square"/>
										</span>
              </template>
              <template #default = "scope">
										<span
                        @click = "handelAddItem"
                        class = "oper-btn"
                        title = "添加行">
											<user-icon icon = "fa fa-plus-square"/>
										</span>&nbsp;&nbsp;
                <span
                    @click = "handelDeleteItem(scope.row)"
                    class = "oper-btn"
                    title = "删除行"
                    v-if = "formProps.values?.length>1">
											<user-icon
                          icon = "fa fa-minus-square"
                          style = "color:indianred"
                      />
										</span>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name = "2">
          <template #title>
            &nbsp;<user-icon icon = "fa-grip-lines-vertical"/>&nbsp;&nbsp;<span>高级属性</span>
          </template>
          <template v-if = "formDatas.compType==='container'">
          </template>
          <template v-else v-for = "(item,key) in advancedFieldList">
            <el-form-item
                :label = "item.label"
                :prop = "key"
                :required = "item.required">
              <el-input v-if = "item.type==='input'"
                        :placeholder = "'请输入'+item.label" v-model = "formProps[key]"/>
              <el-radio-group v-model = "formProps[key]" v-if = "item.type==='radio'">
                <el-radio :label = "data" :value = "data" v-for = "data in item.values"/>
              </el-radio-group>

              <el-checkbox-group v-model = "formProps[key]" v-if = "item.type==='checkbox'">
                <el-checkbox :label = "data" :value = "data" v-for = "data in item.values"/>
              </el-checkbox-group>
              <el-input-number v-if = "item.type==='number'"
                               :placeholder = "'请输入'+item.label"
                               v-model = "formProps[key]"/>
              <el-switch v-if = "item.type==='switch'"
                         :active-value = "item.values[0]"
                         :inactive-value = "item.values[1]"
                         active-text = "是"
                         inactive-text = "否"
                         v-model = "formProps[key]"/>
              <el-button v-if = "item.type==='button'">Click</el-button>
              <el-select v-model = "formProps[key]" v-if = "item.type==='select'">
                <el-option :label = "data" :value = "data" v-for = "data in item.values"/>
              </el-select>
              <el-input v-if = "item.type==='textarea'"
                        :placeholder = "'请输入'+item.label" type = "textarea" v-model = "formProps[key]"/>
            </el-form-item>
          </template>
        </el-collapse-item>
        <el-collapse-item name = "3">
          <template #title>
            &nbsp;<user-icon icon = "fa-grip-lines-vertical"/>&nbsp;&nbsp;<span>自定义事件</span>
          </template>
          <template v-if = "formDatas.compType==='container'">
          </template>
          <template
              v-else
              v-for = "(item,key) in actions"
          >
            <el-form-item
                :label = "item.label"
                :prop = "key"
                v-if = "item.type==='button'">
              <el-button
                  @click = "jsButtonClick(key)" size = "small">Click
              </el-button>
            </el-form-item>
          </template>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div style = "height: 50px"/>
  </el-scrollbar>
</template>
